<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>v-mode指令</title>
  </head>
  <body>
    <!-- v-model:作用是便捷的设置和获取表单元素的值 -->
    <!-- 绑定的数据会和表单元素的值相关联 -->
    <div id="app">
      <!-- 1. 文本框 -->
      <!-- <input type="button" @click="setMessage" value="改变message" />
      <input type="text" v-model="message" @keyup.enter="getMessage" />
      <h1>{{message}}</h1> -->

      <!-- 2. 用v-bind和v-on实现v-model -->
      <!-- <input type="text" :value="message" @input="changeinput" /> -->

      <!-- 3. radio单选按钮 -->
      <!-- <label for="man">
        <input type="radio" id="man" value="男" v-model="message" />男
      </label>
      <label for="woman">
        <input type="radio" id="woman" value="女" v-model="message" />女
      </label>
      <h1>{{message}}</h1> -->

      <!-- 4. checkbox单选框 -->
      <!-- <label for="select">
        <input type="checkbox" v-model="isAgree" id="select" />同意协议
      </label>
      <button :disabled="!isAgree">下一步</button> -->

      <!-- 5. checkbox复选框 -->
      <!-- <input type="checkbox" value="足球" v-model="hobby" />足球
      <input type="checkbox" value="篮球" v-model="hobby" />篮球
      <input type="checkbox" value="乒乓球" v-model="hobby" />乒乓球
      <input type="checkbox" value="羽毛球" v-model="hobby" />羽毛球
      <h1>您的爱好是：{{hobby}}</h1> -->

      <!-- 6. select下拉框 -->
      <!--加上multiple属性就可以多选 要按ctrl才能多选 -->
      <!-- <select v-model="fulit" multiple>
        <option value="苹果">苹果</option>
        <option value="香蕉">香蕉</option>
        <option value="梨子">梨子</option>
        <option value="西瓜">西瓜</option>
      </select>
      <h1>你选择的水果是：{{fulit}}</h1> -->

      <!-- 7. 值绑定：input的值是从网络接口获取或者写在data中 -->
      <!-- <label v-for="item in hobbys">
        <input type="checkbox" v-model="hobby" :value="item" />{{item}}
      </label>
      <h1>您选择的是{{hobby}}</h1> -->

      <!-- 修饰符 -->
      <!-- .number数字类型 -->
      <input type="text" v-model.number="message" />
      <h1>{{message}}</h1>
      <!-- .trim去除前后空格 -->
      <input type="text" v-model.trim="message" />
      <h1>{{message}}</h1>
      <!-- .lazy取消自动更新，失去焦点时更新 -->
      <input type="text" v-model.lazy="message" />
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data: {
          message: "",
          isAgree: "",
          hobby: [],
          fulit: "苹果",
          hobbys: [
            "足球",
            "篮球",
            "高尔夫球",
            "保龄球",
            "台球",
            "羽毛球",
            "乒乓球",
            "排球",
            "网球",
          ],
        },
        methods: {
          setMessage: function () {
            this.message = "苦逼程序员";
          },
          getMessage: function () {
            alert(this.message);
          },
          changeinput(event) {
            this.message = event.target.value;
          },
        },
      });
    </script>
  </body>
</html>
